import React, { Component } from 'react';
import { messages } from 'share/common';
import { connect } from 'react-redux';
import Skeleton from 'components/skeleton';
import SlideFrame from 'components/slide-frame';
import ResizeTable from 'components/resize-table';
import NewExpirationReminder from './new-expiration-reminder';
import invoiceManagementService from '../invoice-management.service';
import { Divider, Popconfirm, Popover, Button, message, Badge } from 'antd';

class ExpirationReminder extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      dataSource: [],
      isShowNewExpiration: false,
      recordExpiration: {},
      columns: [
        {
          title: messages('setting.key767')/*序号*/,
          dataIndex: 'sequence',
          width: '5%'
        },
        {
          title: messages('supplier.key454')/*规则说明*/,
          dataIndex: 'description',
          width: '65%',
          render: (value) =>
            <Popover placement="topLeft" content={value} overlayStyle={{ maxWidth: 500 }}>
              {value}
            </Popover>
        },
        {
          title: messages('supplier.key455')/*规则状态*/,
          dataIndex: 'enabled',
          width: '10%',
          render: (value) => { return this.renderBadge(value, 'enabled');}
        },
        {
          title: messages('supplier.key456')/*生效状态*/,
          dataIndex: 'ectiveStatus',
          width: '10%',
          render: (value) => { return this.renderBadge(value, 'ectiveStatus');}
        },
        {
          title: messages('setting.key1147')/*操作*/,
          width: '10%',
          render: (value, record) => {return this.renderTableOperate(record);}
        },
      ]
    };
  }

  componentDidMount() {
    this.getExpirationReminders();
  }

  getExpirationReminders = () => {
    const { company: { companyOID } } = this.props;
    let { dataSource, loading } = this.state;
    invoiceManagementService.getExpirationReminders(companyOID)
      .then(res => {
        dataSource = [];
        dataSource.push(...res.data);
      })
      .finally(() => {
        loading = false;
        this.setState({ dataSource, loading });
      });
  };

  handleEdit = (recordExpiration) => {
    this.setState({ recordExpiration, isShowNewExpiration: true });
  };

  handleDelete = (record) => {
    invoiceManagementService.deleteExpirationReminder(record.id)
      .then(() => {
        message.success(messages('setting.key213')/*删除成功*/);
      })
      .finally(() => {
        this.setState({ loading: true }, this.getExpirationReminders);
      });
  };

  handleShow = () => {
    let recordExpiration = {
      expiryRemindDay: 10,
      i18n: {},
      staticCalibrationFlag: true,
      expiryDay: 120,
      dynamicRuleFailureTime: '12-31',
      enabled: false,
      forceEnabled: false
    };
    this.setState({ recordExpiration , isShowNewExpiration: true });
  };

  handleHide = () => {
    this.setState({ isShowNewExpiration: false });
  };

  handleClosedExpiration = (refresh) => {
    this.setState({ isShowNewExpiration: false, recordExpiration: {} });
    if (refresh) {
      this.getExpirationReminders();
    }
  };

  renderBadge = (value, flag) => {
    const status = {
      enabled: {
        true: { text: messages('common.status.enable')/*启用*/, status: 'success' },
        false: { text: messages('common.status.disable')/*禁用*/, status: 'error' }
      },
      ectiveStatus: {
        true: { text: messages('supplier.key457')/*已生效*/, status: 'success' },
        false: { text: messages('supplier.key458')/*未生效*/, status: 'default' }
      }
    };
    return (
      <div>
        <Badge {...status[flag][value]} />
      </div>
    );
  };
  renderTableOperate = (record) => {
    return (
      <section>
        <a onClick={() => {this.handleEdit(record);}}>{messages('common.edit')/*编辑*/}</a>
        <Divider type="vertical"/>
        <Popconfirm
          title={messages('setting.key272'/*确认删除吗？*/)}
          placement="topRight"
          okText={messages('common.ok')}
          cancelText={messages('common.cancel')}
          onConfirm={() => {this.handleDelete(record);}}>
          <a>{messages('common.delete')/*删除*/}</a>
        </Popconfirm>
      </section>
    );
  };

  render() {
    const { loading, columns, dataSource, isShowNewExpiration, recordExpiration } = this.state;
    return (
      <Skeleton loading={loading}>
        <section style={{ marginBottom: '20px' }}>
          <Button onClick={this.handleShow} type="primary">{messages('supplier.key459')/*新增过期校验规则*/}</Button>
        </section>

        <ResizeTable
          size='middle'
          rowKey='id'
          columns={columns}
          bordered
          dataSource={dataSource}/>

        <SlideFrame
          show={isShowNewExpiration}
          title={!recordExpiration.id ? messages('supplier.key459')/*新增过期校验规则*/ : messages('supplier.key460')/*编辑过期校验规则*/}
          width="800px"
          params={{ recordExpiration }}
          onClose={this.handleHide}
          content={NewExpirationReminder}
          hasFooter={false}
          afterClose={this.handleClosedExpiration}/>
      </Skeleton>
    );
  }
}


function mapStateToProps(state) {
  return {
    company: state.login.company
  };
}

const WrappedInvoiceManagement = ExpirationReminder;
export default connect(mapStateToProps)(WrappedInvoiceManagement);
